<template>
  <view class="birthday-picker">
    <picker-view 
      :value="value" 
      @change="bindChange"
      indicator-style="height: 50px;"
      class="picker-view"
    >
      <!-- 年份选择 -->
      <picker-view-column>
        <view 
          v-for="(item, index) in years" 
          :key="index" 
          class="picker-item"
        >
          {{ item }}年
        </view>
      </picker-view-column>

      <!-- 月份选择 -->
      <picker-view-column>
        <view 
          v-for="(item, index) in months" 
          :key="index" 
          class="picker-item"
        >
          {{ item }}月
        </view>
      </picker-view-column>

      <!-- 日期选择 -->
      <picker-view-column>
        <view 
          v-for="(item, index) in days" 
          :key="index" 
          class="picker-item"
        >
          {{ item }}日
        </view>
      </picker-view-column>
    </picker-view>
  </view>
</template>

<script>
export default {
  name:"birthday-picker",
  props: {
    // 初始日期（格式：YYYY-MM-DD）
    defaultValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      years: [],
      months: Array.from({length: 12}, (_, i) => i + 1),
      days: [],
      value: [0, 0, 0],
      currentYear: 0,
      currentMonth: 0,
      currentDay: 0
    }
  },
  created() {
    this.initYears()
    this.initDefaultValue()
  },
  methods: {
    // 初始化年份（最近100年）
    initYears() {
      const currentYear = new Date().getFullYear()
      this.years = Array.from({length: 100}, (_, i) => currentYear - i).reverse()
    },

    // 初始化默认值
    initDefaultValue() {
      let initialDate = new Date()
      if (this.defaultValue) {
        initialDate = new Date(this.defaultValue)
      }

      this.currentYear = initialDate.getFullYear()
      this.currentMonth = initialDate.getMonth() + 1
      this.currentDay = initialDate.getDate()

      this.updateDays()
      
      // 设置默认选中位置
      this.value = [
        this.years.findIndex(year => year === this.currentYear),
        this.currentMonth - 1,
        this.currentDay - 1
      ]
    },

    // 更新天数
    updateDays() {
      const daysInMonth = new Date(
        this.currentYear, 
        this.currentMonth, 
        0
      ).getDate()
      
      this.days = Array.from({length: daysInMonth}, (_, i) => i + 1)
    },

    // 选择器变化事件
    bindChange(e) {
      const val = e.detail.value
      this.currentYear = this.years[val[0]]
      this.currentMonth = this.months[val[1]]
      
      // 检查是否需要更新天数
      const prevDays = this.days.length
      this.updateDays()
      
      // 如果天数变化，调整日期索引
      let dayIndex = val[2]
      if (this.days.length !== prevDays) {
        dayIndex = Math.min(dayIndex, this.days.length - 1)
      }
      
      this.currentDay = this.days[dayIndex]
      
      // 更新value保证UI同步
      this.value = [val[0], val[1], dayIndex]
      
      // 触发change事件
      this.$emit('change', this.getFormattedDate())
    },

    // 获取格式化日期
    getFormattedDate() {
      return `${this.currentYear}-${String(this.currentMonth).padStart(2, '0')}-${String(this.currentDay).padStart(2, '0')}`
    }
  }
}
</script>

<style scoped>
.birthday-picker {
  height: 300rpx;
}

.picker-view {
  height: 100%;
}

.picker-item {
  line-height: 50px;
  text-align: center;
  font-size: 16px;
}
</style>